<template>
  <div class="c-page">
    <div class="title">工艺流程段</div>
      <div class="plan">
      <div class="item">
        <span>计划:</span>
        <span>350</span>
        <span>10/18</span>
      </div>
       <div class="item">
        <span>完成:</span>
        <span>250</span>
        <span>10/18</span>
      </div>
       <div class="item">
        <span>废品:</span>
        <span>2</span>
        <span>0.32%</span>
      </div>
    </div>
    <!--    需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div  标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。-->
    <div id="container" class="node-tree"></div>
  </div>
</template>
<script>
import G6 from "@antv/g6";

export default {
  // 引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：
  data() {
    return {
      model: {
        id: "A",
        label: "root",
        children: [
          {
            id: "A1",
            label: "主序列",
            children: [
              {
                id: "A11",
                label: "工序1",
              },
              {
                id: "A12",
                label: "工序2",
              },
              {
                id: "A13",
                label: "工序3",
              },
              { 
                id: "A14", 
                label: "工序4" 
              },
            ],
          },
          {
            id: "A2",
            label: "次序列",
            children: [
              {
                id: "A21",
                children: [
                  {
                    id: "A211",
                    label: "工序6",
                  },
                  {
                    id: "A212",
                    label: "A212",
                  },
                ],
              },
              {
                id: "A22",
                label: "demo",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    G6.registerNode("card-node", {
      draw: function drawShape(cfg, group) {
        const r = 2;
        const color = "#5B8FF9";
        const w = cfg.size[0];
        const h = cfg.size[1];
        const shape = group.addShape("rect", {
          attrs: {
            x: -w / 2,
            y: -h / 2,
            width: w, // 200,
            height: h, // 60
            stroke: color,
            radius: r,
            fill: "#fff",
          },
          name: "main-box",
          draggable: true,
        });

        group.addShape("rect", {
          attrs: {
            x: -w / 2,
            y: -h / 2,
            width: w, // 200,
            height: h / 2, // 60
            fill: color,
            radius: [r, r, 0, 0],
          },
          name: "title-box",
          draggable: true,
        });

        // title text
        group.addShape("text", {
          attrs: {
            textBaseline: "top",
            x: -w / 2 + 8,
            y: -h / 2 + 2,
            lineHeight: 20,
            text: cfg.id,
            fill: "#fff",
          },
          name: "title",
        });
        cfg.children &&
          group.addShape("marker", {
            attrs: {
              x: w / 2,
              y: 0,
              r: 6,
              cursor: "pointer",
              symbol: G6.Marker.collapse,
              stroke: "#666",
              lineWidth: 1,
              fill: "#fff",
            },
            name: "collapse-icon",
          });
        group.addShape("text", {
          attrs: {
            textBaseline: "top",
            x: -w / 2 + 8,
            y: -h / 2 + 24,
            lineHeight: 20,
            text: cfg.label || "description",
            fill: "rgba(0,0,0, 1)",
          },
          name: "description",
        });
        return shape;
      },
      setState(name, value, item) {
        if (name === "collapsed") {
          const marker = item
            .get("group")
            .find((ele) => ele.get("name") === "collapse-icon");
          const icon = value ? G6.Marker.expand : G6.Marker.collapse;
          marker.attr("symbol", icon);
        }
      },
    });
    this.renderShow();
  },
  methods: {
    renderShow() {
      let width = document.getElementById("container").scrollWidth;
      let height = document.getElementById("container").scrollHeight;
      console.log(width, height, "test");
      const graph = new G6.TreeGraph({
        container: "container", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width,
        height,
        defaultNode: {
          type: "card-node",
          size: [100, 40],
          style: {
            fill: "#C6E5FF",
            stroke: "#5B8FF9",
          },
        },
        defaultEdge: {
          type: "cubic-horizontal",
          style: {
            stroke: "#A3B1BF",
            endArrow: true,
          },
        },
        layout: {
          type: "indented",
          direction: "LR",
          dropCap: false,
          indent: 200,
          getHeight: () => {
            return 60;
          },
        },
      });
      graph.data(this.model); // 读取 Step 2 中的数据源到图上
      graph.render(); // 渲染图
      graph.fitView();
      graph.on("node:click", (e) => {
        if (e.target.get("name") === "collapse-icon") {
          e.item.getModel().collapsed = !e.item.getModel().collapsed;
          graph.setItemState(e.item, "collapsed", e.item.getModel().collapsed);
          graph.layout();
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.c-page {
  width: 100%;
  height: 90%;
  padding: 5px;
  .title {
    background: url("../../../assets/images/title-bg.png") no-repeat top center;
    background-size: 100% 100%;
    font-size: 16px;
    padding: 4px 10px;
    text-align: left;
    width: 160px;
    margin: 10px;
    color: #ffffff;
  }
    .plan {
    color: #2ED1E0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    .item {
      flex: 1;
      span {
        margin-left: 2px;
      }
    }
  }
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>
